<template>
	<div class="staff">

		<!--顶部搜索栏-->
		<section class="head">
			<el-button type="primary" icon="el-icon-search" @click="getData()">查询</el-button>
			<el-input placeholder="请输入您想搜索的部门名称" v-model="seachObj.department.departname"></el-input>
			<!--<el-input placeholder="请输入您想搜索的部门编号" v-model="seachObj.department.departnumber"></el-input>-->
			<el-date-picker type="date" placeholder="选择日期" v-model="seachObj.department.startDate">
			</el-date-picker>
			<el-button type="primary" @click="dialogFormVisible1=true" icon="el-icon-plus">新增部门</el-button>
		</section>

		<!--侧边栏-->
		<aside-item :userid="userMessage.userid" :username="userMessage.username"></aside-item>

		<!--部门表格-->
		<el-table :data="depart_list" border style="width: 60%;font-size: 13px;margin-top: 60px;float: left;">
			<el-table-column label="部门信息表" align="center">
				<el-table-column label="部门id" prop="departid" align="center" v-if="showCol">
				</el-table-column>
				<el-table-column prop="departnumber" label="部门编号" align="center">
				</el-table-column>
				<el-table-column prop="departname" label="部门名称" align="center">
				</el-table-column>
				<el-table-column prop="startDate" label="创建日期" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" title="编辑" @click="departEdit(scope.row.departid)"></el-button>
						<el-button type="primary" icon="el-icon-view" size="mini" title="查看" @click="departDetail(scope.row.departid)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" title="删除" @click="deleteDepart(scope.row.departid,scope.$index, scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>

		<!--新增部门-->
		<el-dialog title="新增部门" :visible.sync="dialogFormVisible1" top="100px" width="1000px">
			<el-form>
				<el-form-item label="*部门名称：">
					<el-input v-model="addForm.departname">
					</el-input>
				</el-form-item>
				<el-form-item label="*部门编号：">
					<el-input v-model="addForm.departnumber">
					</el-input>
				</el-form-item>
				<el-form-item label="*创建日期：">
					<el-date-picker type="date" placeholder="选择日期" v-model="addForm.startDate">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="部门简介：">
					<el-input v-model="addForm.context">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="insertDepart()">确 定</el-button>
					<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!--部门详情 -->
		<el-dialog title="新增部门" :visible.sync="dialogFormVisible2" top="100px" width="1000px">
			<el-form :model="departInfo">
				<el-form-item label="*部门名称：">
					<el-input v-model="depart_detail.departname" :disabled="status">
					</el-input>
				</el-form-item>
				<el-form-item label="*部门编号：">
					<el-input v-model="depart_detail.departnumber" :disabled="status">
					</el-input>
				</el-form-item>
				<el-form-item label="*创建日期：">
					<el-date-picker type="date" placeholder="选择日期" v-model="depart_detail.startDate" :disabled="status">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="部门简介：">
					<el-input v-model="depart_detail.context" :disabled="status">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="updateDepart()">确 定</el-button>
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>

				</el-form-item>
			</el-form>
		</el-dialog>

		<div class="pagination">
			<el-pagination background @current-change="handleCurrentChange" :page-size="seachObj.pageSize" :current-page.sync="seachObj.page" layout="prev, pager, next, jumper,total" :total="totalNum">
			</el-pagination>
		</div>
	</div>

</template>

<script>
	import asideItem from "../../common/asideblock"
	import { mapState, mapMutations } from 'vuex';
	export default {
		name: 'staff',

		components: {
			asideItem
		},

		data() {
			return {
				depart_list: [],

				depart_detail: {},

				showCol: false,

				seachObj: {
					department: {
						departid: '',
						departname: '',
						startDate: ''
					},
					page: 1,
					pageSize: 5
				},

				job_type: [{
					value: '1',
					label: '正式'
				}, {
					value: '0',
					label: '实习'
				}],

				addForm: {
					departname: '',
					departnumber: '',
					context: '',
					startDate: ''
				},

				recordForm: {
					recordname: '',
					recordman: '',
					date: '',
					username: '',
					userid: '',
					recorddetail:''
				},

				departInfo: {
					departname: '',
					departnumber: ''
				},
				userMessage: {
					username: '',
					userid: ''
				},

				dialogFormVisible1: false,

				dialogFormVisible2: false,

				status: false,

				totalNum: ''
			}
		},
		mounted() {
			this.getData();
			this.getLoginUser();
		},
		methods: {

			getData() {
				var vm = this;
				vm.$http.post(this.API.FINDALLDEPART, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
					vm.depart_list = res.data.data.data;
					for(let i = 0; i < vm.depart_list.length; i++) {
						if(vm.depart_list[i].startDate == "" || vm.depart_list[i].startDate == null) {
							vm.depart_list[i].startDate = "暂无";
						}
					}
					vm.totalNum = res.data.total;
					vm.loading = false;
				})
			},

			getLoginUser() {
				this.userMessage.username = decodeURI(this.$route.query.username);
				this.userMessage.userid = this.$route.query.userid;
				this.recordForm.username = decodeURI(this.$route.query.username);
				this.recordForm.userid = this.$route.query.userid;
			},

			insertDepart() {
				var vm = this;
				vm.recordForm.recordname = "新增";
				vm.recordForm.recordman = "部门";
				vm.recordForm.recorddetail =vm.addForm.departname;
				vm.recordForm.date = new Date().getTime();
				if(vm.addForm.departname == "" || vm.addForm.departnumber == "" || vm.addForm.startDate == "") {
					vm.$message({
						showClose: true,
						message: '请填写所有必填项',
						type: 'error'
					});
				} else {
					vm.$http.post(this.API.INSERTDEPART, JSON.stringify(vm.addForm), this.API.HEADER).then((res) => {
						if(res.data.message == "success") {
							vm.$message({
								showClose: true,
								message: '添加成功'
							});
							vm.dialogFormVisible1 = false;
							vm.$http.post(this.API.INSERTRECORD, JSON.stringify(vm.recordForm), this.API.HEADER).then((res) => {})
							vm.getData();
						}
					})
				}
			},

			updateDepart(id) {
				var vm = this;
				vm.recordForm.recordname = "修改";
				vm.recordForm.recordman = "部门";
				vm.recordForm.recorddetail =vm.depart_detail.departname;
				vm.recordForm.date = new Date().getTime();
				if(vm.depart_detail.departname == "" || vm.depart_detail.departnumber == "" || vm.depart_detail.startDate == "") {
					vm.$message({
						showClose: true,
						message: '请填写所有必填项',
						type: 'error'
					});
				} else {
					vm.$http.post(this.API.UPDATEDEPART, JSON.stringify(vm.depart_detail), this.API.HEADER).then((res) => {
						if(res.data.message == "success") {
							vm.$message({
								showClose: true,
								message: '修改成功'
							});
							vm.$http.post(this.API.INSERTRECORD, JSON.stringify(vm.recordForm), this.API.HEADER).then((res) => {
							})
							vm.dialogFormVisible2 = false;
							vm.getData();
						}
					})
				}
			},

			departDetail(id) {
				var vm = this;
				vm.dialogFormVisible2 = true;
				vm.$http.post(this.API.DEPARTDETAIL, JSON.stringify({
					departid: id
				}), this.API.HEADER).then((res) => {
					vm.depart_detail = res.data.data.data;
					vm.loading = false;
				})
				vm.status = true;
			},

			departEdit(id) {
				var vm = this;
				vm.departDetail(id);
				vm.status = false;
			},

			deleteDepart(id, index, row) {
				var vm = this;
				vm.recordForm.recordname = "删除";
				vm.recordForm.recordman = "部门";
				vm.recordForm.date = new Date().getTime();
				vm.$http.post(this.API.DEPARTDETAIL, JSON.stringify({
					departid: id
				}), this.API.HEADER).then((res) => {
					vm.recordForm.recorddetail = res.data.data.data.departname;
					vm.loading = false;
				})
				this.$confirm('确认删除？')
					.then(_ => {
						vm.$http.post(this.API.DELETEDEPART, JSON.stringify({
							departid: id
						}), this.API.HEADER).then((res) => {
							if(res.data.message == "success") {
								vm.$message({
									showClose: true,
									message: '刪除成功'
								});
								vm.$http.post(this.API.INSERTRECORD, JSON.stringify(vm.recordForm), this.API.HEADER).then((res) => {})
								vm.getData();
							} else {
								vm.$message({
									showClose: true,
									message: '删除失败（可能是网络问题或缓存问题）'
								});
							}
						})
					})
			},

			handleCurrentChange(val) {
				var vm = this;
				vm.seachObj.page = val;
				vm.getData();
			},

			search() {
				var vm = this;
				vm.getData();
			},
			//获取当前时间
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
					" " + date.getHours() + seperator2 + date.getMinutes() +
					seperator2 + date.getSeconds();
				return currentdate;
			}

		}
	}
</script>

<style lang="scss" scoped>
	#staff {
		width: 60%;
		margin: 50px auto;
		.el-table {
			width: 70%;
			margin-left: 5%;
			float: left;
		}
	}
	
	.el-table {
		border-radius: 10px;
		padding-bottom: 10px;
	}
	
	.head {
		margin: 0 auto;
		margin-top: 50px;
		padding-bottom: 20px;
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e6e6e6;
		.el-input {
			width: 20%;
			float: right;
			margin-left: 10px;
		}
		.el-data-picker {
			float: right;
		}
		.el-button {
			float: right;
			margin: 0 50px 0 10px;
		}
	}
	
	.el-dialog {
		.el-form {
			width: 80%;
			margin: 0 auto;
			.el-form-item {
				width: 100%;
				display: block;
				.el-input {
					width: 70%;
				}
			}
			/*上传图片样式*/
			.avatar-uploader .el-upload {
				width: 40%;
				float: left;
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}
			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}
			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}
			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		}
	}
	
	.pagination {
		width: 100%;
		height: 24px;
		margin: 5% 0;
		font-size: 12px;
		text-align: right;
		float: right;
	}
</style>